<template>
  <div class="app-container">
    <template v-if="!showDetailIndex">
      <div class="search-container">
        <el-form ref="form" :model="queryParams" :inline="true">
          <el-form-item prop="name" label="供者姓名">
            <el-input v-model="queryParams.name" placeholder="供者姓名" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item prop="phone" label="供者电话">
            <el-input v-model="queryParams.phone" placeholder="供者电话" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery" icon="el-icon-search">搜索</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-card shadow="never">
        <template #header>
          <el-button type="success" @click="addFmtDonorDialog()"><i class="el-icon-circle-plus"></i> 新增供者</el-button>
        </template>
        <el-table v-loading="loading" :data="dataList" highlight-current-row border
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" width="55" prop="dataIndex" />
          <el-table-column label="编号" prop="code" width="150"/>
          <el-table-column label="姓名" prop="name" />
          <el-table-column label="性别" prop="sexText" width="60" />
          <el-table-column label="电话" prop="phone" width="120"/>
          <el-table-column label="生日" prop="birthday" width="150"/>
          <!-- <el-table-column label="面诊结果" prop="consultationQualifiedText" /> -->
          <el-table-column label="创建时间" prop="createTimeText" />
          <el-table-column fixed="right" label="操作" min-width="80" width="180">
            <template #default="scope">
              <el-button type="primary" size="small" link @click="openDetailDialog(scope.row)"><i
                  class="el-icon-view"></i> 查看</el-button>
              <el-button type="info" size="small" link @click="openEditDialog(scope.row.id)"><i class="el-icon-edit"></i> 编辑</el-button>
              <!-- <el-button type="warning" size="small" link @click="openDialog(scope.row.id)"><i
                                    class="el-icon-edit"></i> 编辑</el-button>
                            <el-button type="danger" size="small" link @click="handleDelete(scope.row.id)"><i
                                    class="el-icon-delete"></i> 删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-card>

      <!-- 字典表单弹窗 -->
      <!-- <el-dialog :visible.sync="dialog.visible" :title="dialog.title" width="500px" :before-close="closeDialog">
        <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入电话" />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="addOrUpdate">确 定</el-button>
            <el-button @click="closeDialog">取 消</el-button>
          </div>
        </template>
      </el-dialog> -->
    </template>

    <el-dialog :visible.sync="dialog1.visible" :title="dialog1.title" width="500px" :before-close="closeDialog1">
        <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="100px">
          <el-form-item label="编号" prop="code">
            <el-input v-model="formData.code" placeholder="请输入编号" />
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请输入性别">
              <el-option label="男" :value="parseInt('1')"></el-option>
              <el-option label="女" :value="parseInt('0')"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="民族" prop="ethnicity">
            <el-input v-model="formData.ethnicity" placeholder="请输入名族" />
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-input v-model="formData.birthday" placeholder="请输入生日" />
          </el-form-item>
          <el-form-item label="职业" prop="career">
            <el-input v-model="formData.career" placeholder="请输入职业" />
          </el-form-item>
          <el-form-item label="学历" prop="education">
            <el-input v-model="formData.education" placeholder="请输入学历" />
          </el-form-item>
          <el-form-item label="身高" prop="height">
            <el-input v-model="formData.height" placeholder="请输入身高" />
          </el-form-item>
          <el-form-item label="体重" prop="weight">
            <el-input v-model="formData.weight" placeholder="请输入体重" />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="addOrUpdate(true)" v-if="!editDonor">面诊合格</el-button>
            <el-button type="info" @click="addOrUpdate(false)" v-if="!editDonor">面诊不合格</el-button>
            <el-button type="primary" @click="addOrUpdate()" v-if="editDonor">确定</el-button>
            <el-button @click="closeDialog1">取 消</el-button>
          </div>
        </template>
      </el-dialog>

    <el-dialog :visible.sync="addFmtDialog.visible" :title="addFmtDialog.title" width="800px" :before-close="closeFmtDonorDialog">
      <el-table v-loading="loading" :data="sysFmtUserList" highlight-current-row border
        @selection-change="handleFmtSelectionChange">
        <el-table-column type="selection" width="55" align="center" :selectable="addFmtDialogSelect"/>
        <el-table-column label="序号" width="55" prop="dataIndex" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="昵称" prop="nickName" />
        <el-table-column label="电话" prop="phoneNumber" />
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :disabled="sysUserIds.length == 0" @click="addFmtDonor()">确认新增</el-button>
          <el-button @click="closeFmtDonorDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <fmtUserDetailDesign :checkedData="checkedData" v-if="showDetailIndex" @close="closeDetail"></fmtUserDetailDesign>

  </div>
</template>

<script>

import fmtUserDetailDesign from '@/views/aliyun/fmt/donor/detail'
import fmtDonorApi from '@/api/aliyun/fmt/donor'
import userApi from '@/api/system/user'
import { formatDate } from '@/utils/formatTime'
export default {
  name: 'fmtDonorIndex',
  components: {
    fmtUserDetailDesign
  },
  data() {
    return {
      queryParams: {
        name: '',
        phone: '',
        pageNum: 0,
        pageSize: 10,

      },
      total: 0,
      loading: false,
      dataList: [],
      ids: [],
      dialog: {},
      formData: {},
      rules: {},

      showDetailIndex: false,
      checkedData: {},
      editDonor: false,

      addFmtDialog: {},
      sysUserIds: [],
      dialog1: {},
      sysFmtUserList: [],
    };
  },
  methods: {
    addFmtDialogSelect (v) {
      if (v.donor && v.donor) {
        return false;
      }
      if (!v.phoneNumber) {
        return false;
      }
      return true;
    },
    closeDialog1 () {
      this.$set(this.dialog1, 'visible', false);
      this.handleQuery();
    },
    openEditDialog (id) {
      this.editDonor = true;
      this.$set(this.dialog1, 'visible', true);
      let that = this;
      fmtDonorApi.get(id).then((res) => {
        this.$set(this.dialog1, 'title', '编辑供者');
        let data = res.data;
        that.formData = data;

      });
    },
    addFmtDonor () {
      console.log(this.sysUserIds)
      this.$confirm('是否确认将已选择的用户设置为FMT供者?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        fmtDonorApi.setDonorQualified(this.sysUserIds).then(res => {
          this.$message({ message: 'FMT供者添加成功！', type: 'success' });
          this.closeFmtDonorDialog();
          this.handleQuery();
        })
      }).catch(() => {});
    },
    addFmtDonorDialog () {
      this.loading = true;
      this.$set(this.addFmtDialog, 'title', '新增FMT供者');
      this.$set(this.addFmtDialog, 'visible', true);
      userApi.manageWxMiniUsers().then(res => {
        this.sysFmtUserList = res.data;
        this.loading = false;
      })
    },
    handleFmtSelectionChange (val) {
      this.sysUserIds = [];
      val.forEach(v => {
        this.sysUserIds.push(v.id);
      });
    },
    closeFmtDonorDialog () {
      this.$set(this.addFmtDialog, 'visible', false);
    },
    openDetailDialog(row) {
      this.checkedData = row;
      this.showDetailIndex = true;
    },
    closeDetail() {
      this.showDetailIndex = false;
    },
    handleQuery() {
      this.loading = true;
      let criteriaVos = [];
      if (this.queryParams.name && this.queryParams.name != '') {
        criteriaVos.push({
          name: 'name',
          searchType: 'LIKE',
          searchVal: this.queryParams.name
        });
      }
      if (this.queryParams.phone && this.queryParams.phone != '') {
        criteriaVos.push({
          name: 'phone',
          searchType: 'LIKE',
          searchVal: this.queryParams.phone
        });
      }
      let params = {
        number: this.queryParams.pageNum,
        size: this.queryParams.pageSize,
        criteriaVos: criteriaVos
      };
      fmtDonorApi.page(params).then((res) => {
        let data = res.data;
        let index = 1
        data.content.forEach((v) => {
          v.createTimeText = formatDate(new Date(v.createTime), "YYYY-mm-dd HH:MM:SS")
          v.updateTimeText = formatDate(new Date(v.updateTime), "YYYY-mm-dd HH:MM:SS")
          v.sexText = v.sex == 0 ? '女' : '男'
          v.consultationQualifiedText = v.consultationQualified == null ? '-' : (v.consultationQualified ? '合格' : '不合格')
          v.dataIndex = index++;
        });
        this.dataList = data.content;

        this.total = data.count;
        this.loading = false;
      }).catch(() => { });
    },
    resetQuery() {
      this.queryParams = {
        name: '',
        phone: '',
        pageNum: 0,
        pageSize: 10,
      };
      this.handleQuery();
    },
    addOrUpdate(consultationQualified) {
      if (consultationQualified == null) {
        fmtDonorApi.consultationQualified(this.formData).then(res => {
          this.$message({ message: '供者编辑成功！', type: 'success' });
          this.closeDialog1();
        })
        return;
      }
      let result = consultationQualified ? '合格' : '不合格';
      this.$confirm('对于该供者面诊结果为【' + result + '】, 请确认', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formData.consultationQualified = consultationQualified;
        fmtDonorApi.consultationQualified(this.formData).then(res => {
          this.$message({ message: '面诊环节完成！', type: 'success' });
          this.closeDialog1();
        })
      }).catch(() => { });
    },
    openDialog(id) {
      this.$set(this.dialog, 'visible', true);
      let that = this;
      if (id) {
        this.$set(this.dialog, 'title', '编辑供者信息');
        fmtDonorApi.get(id).then((res) => {
          let data = res.data;
          that.formData = data;

        });
      } else {
        this.$set(this.dialog, 'title', '新增供者信息');
        that.formData = {};
      }

    },
    closeDialog() {
      this.$set(this.dialog, 'visible', false);
      this.$set(this.dialog, 'title', '');
      this.handleQuery();
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (id) {
          fmtDonorApi.delete(id).then((res) => {
            this.$message({ message: '供者信息删除成功！', type: 'success' });
            this.handleQuery();
          });
        } else {
          this.$message.error('暂不支持批量删除供者信息！');
        }
      }).catch(() => { });

    },
    handleSelectionChange(val) {
      this.ids = [];
      val.forEach(v => {
        this.ids.push(v.id);
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.handleQuery();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.handleQuery();
    },
  },
  created() {
    this.handleQuery();
  }
};
</script>

<style scoped>
.el-pagination {
  margin-top: 10px;
  float: right;
  margin-bottom: 10px;
}
</style>